<template>
<div class="content">
  <div class="goodsinfo">
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="item in goodlist" :key="item.id">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            <img :src="item.thumb_path" alt="">
            <div class="info">
              <h1>{{item.title}}</h1>
              <p class="box2">
                <span class="price">￥{{item.sell_price}}</span>
                <shopinfo></shopinfo>
                <a href="#">删除</a>
              </p>

            </div>
            
					</div>
				</div>
			</div>
  </div>
  <div class="box">
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
					</div>
				</div>
			</div>
  </div>
</div>
</template>

<script>
import shopinfo from "./subcomponents/shopbox.vue"
export default {
  data(){
    return{
      value:true,
      goodlist:[]
    }
  },
  created(){
    this.getgoodsInfo();
  },
  methods:{
    getgoodsInfo(){
      var goodsid = [];
      this.$store.state.car.forEach(item=>goodsid.push(item.id))
      if(goodsid.length === 0){
        return;
      }
      
      this.$http.get("http://www.liulongbin.top:3005/api/goods/getshopcarlist/"+goodsid.join(",")).then(result=>{
        
        if(result.body.status ===0)
        {
          this.goodlist = result.body.message;

        }
      })
    }
    },
    components:{
    shopinfo
  }

  }
 


</script>

<style>
.content{
  background-color: #eee;
}
img{
  height: 60px;
  width: 60px;
}
h1{
  font-size: 13px;  
}
.price{
  color: red;
  font-weight: bold;
}
.mui-card-content-inner{
  display: flex;
  align-items: center;

}
.box2{
  display:flex;
  align-items: center;
}
</style>